<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>添加商品</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    main .myform {
      width: 30%;
      margin-left: 40px;
    }

    main p {
      display: block;
      width: 100%;
      /* position: absolute;
      bottom: 20px; */
      text-align: center;
      margin: 20px 0;
    }

    .footer {
      left: 0;
      right: 0;
      bottom: 10px;
      color: #666;
      text-align: center;
      margin-bottom: 10px;
    }
  </style>
  <!-- Bootstrap -->
<!--  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">-->
<!--  <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">-->
<!--  &lt;!&ndash; jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) &ndash;&gt;-->
<!--  <script src="static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>-->
<!--&lt;!&ndash;  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment-with-locales.js"></script>&ndash;&gt;-->
<!--  <script src="static/bootstrap-3.4.1/js/bootstrap.js"></script>-->
<!--  <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>-->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!--  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.25.3/moment-with-locales.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
  <link href="./static/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">
  <script src="./static/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
  <script src="./static/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script><!--汉化中文语言包-->

</head>

<body>
<div class="container-fluid my-container">
  <main>
    <!-- 路径导航 -->
    <ol class="breadcrumb" style="margin-top:5px;">
      <li><a href="#">主页</a></li>
      <li><a href="#">商品管理</a></li>
      <li class="active">添加商品</li>
    </ol>
    <!--<form enctype="multipart/form-data">
      &lt;!&ndash;<label>Chinese Input</label>
      <div class="file-loading">
        <input id="uploadFile" name="file" type="file" >
      </div>&ndash;&gt;
      <div class="form-group">
        <label for="uploadPic">上传图片</label>
        <input id="uploadPic" name="file" type="file"  class="file" data-overwrite-initial="false" data-browse-on-zone-click="true">
      </div>
    </form>-->

    <form enctype="multipart/form-data" class="myform">
      <label >上传图片</label>
      <div class="file-loading">
        <input id="uploadFile" name="file" type="file"  data-browse-on-zone-click="true">
      </div>
    </form>
    <!-- 表单 -->
    <div class="myform">
      <form id="myForm" action="/pet/goods/add" method="post" enctype="multipart/form-data">
        <div class="form-group">
          <label for="goodsName">商<span style="color:transparent;user-select: none;">隐藏</span>品：</label>
          <input type="text" class="form-control" name="goodsName" id="goodsName" placeholder="请商品名称">
        </div>
        <div class="form-group">
          <label>分<span style="color:transparent;user-select: none;">隐藏</span>类：</label>
          <div class="radio">
            <select id="selectList" class="form-control">

            </select>
          </div>
        </div>
          <br>
        <div class="form-group">
          <label for="depict">商品描述:</label>
          <textarea class="form-control" rows="3" placeholder="请输入商品描述" name="depict" id="depict"></textarea>
        </div>
        <div class="form-group">
          <label  for="price">商品价格:</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="price" name="price" placeholder="价格">
            <div class="input-group-addon">.00</div>
          </div>
        </div>
        <div class="form-group">
          <label  for="productionData">生产日期:</label>
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" id="productionData" name="productionData" />
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
          </div>
        </div>
        <br>
        <button type="button" class="btn btn-success" onclick="save()" id="save-btn">保存</button>
      </form>
    </div>
  </main>
<!--  &lt;!&ndash; 尾部 &ndash;&gt;
  <div class="footer">技术支持:计科B1902第三组</div>-->
</div>
<script>
  $(function (){
    $.ajax({
      type: 'GET',// 提交方式，跟接口规定的一致
      url: `/pet/type/findAll/''/1`,// url服务端的接口地址
      cache: false,// 不启用缓存
      dataType: 'json',// 期望后端返回的数据的类型
      success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
        console.log("返回类别列表信息", res)
        if (res.code == 1) {// 数据查询成功

          // 判断后端是否传过来列表数据
          if (res.result && res.result.list.length > 0) {// 有数据
            // 遍历类别数据
            for (let type of res.result.list) {
              $(`
                    <option  value="${type.typeId}">${type.typeName}</option>
              `).appendTo($(".radio .form-control"))
            }
          }
        }
      },
      error: function (err) {
        console.log("Error=>", err);
      }
    })
  })


  var goodsPic="";
  $(function(){
    $('#uploadFile').fileinput({
      theme : 'explorer-fas',
      language: 'zh',
      uploadAsync: true, //默认异步上传
      showUpload: true,  //是否显示上传按钮
      showRemove :true, //显示移除按钮
      showPreview: true, // 显示预览信息： true 显示 , false 不显示
      showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
      showCaption: true, // 显示标题：true 显示 , false 不显示
      uploadUrl: 'http://localhost:8080/pet/goods/uploadImg', // 上传文件的url
      allowedFileExtensions: ['jpg', 'png', 'gif'], // 允许文件扩展名
      browseClass: "btn btn-primary ",
      uploadExtraData: {kvId: '10'}, // 额外传输的参数
      dropZoneEnabled: false,//是否显示拖拽区域
      dropZoneTitle: '文件拖到这里即可上传！', // 拖拽区域提示内容
    });

    // fileuploaded 此事件仅针对ajax上传完成后触发， 可用于图片文件回显
    $('#uploadFile').on('fileuploaded', function(event, data, previewId, index) {
      var result = data.response;
      goodsPic=result.result;
      console.log(result.result)
    });
  });


  $(function () {
    $('#datetimepicker1').datetimepicker({
      format: 'YYYY-MM-DD',			//显示年月日
      locale: moment.locale('zh-cn')
    });
  });
  // 提交表单的方法
  function save() {
    // 非空校验
    var goodsName = $("#goodsName").val();
    var typeId = $("#selectList option:selected").val();
    console.log(typeId+"hhhhh")
    // var goodsPic = $("#goodsPic").val();
    var depict = $("#depict").val();
    var price = $("#price").val();
    var productionData = $("#productionData").val();
    console.log(goodsName, typeId, goodsPic, depict,price,productionData);
    // 进行非空校验
    if (!goodsName|| goodsName === '') {
      bootoast({
        message: '商品名不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (!typeId|| typeId === '') {
      bootoast({
        message: '类别id不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (!depict|| depict === '') {
      bootoast({
        message: '商品描述不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    if (!price|| price === '') {
      bootoast({
        message: '价格不能为空',
        type: 'danger',
        position:'top',
        timeout:2
      });
      return false;
    }
    // 提交表单
    $.ajax({
      type: 'post',// 提交方式 post
      url: $("#myForm").attr("action"),// /
      cache: false,// 不启用缓存
      data: `goodsName=${goodsName}&typeId=${typeId}&goodsPic=${goodsPic}&depict=${depict}&price=${price}&productionData=${productionData}`,
      dataType: 'json',// 期望服务器响应的数据类型 json
      success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
        console.log(result);
        // clearData();
        // 提示
        bootoast({
          message: result.msg,
          type: 'success',
          position:'top',
          timeout:2
        });
        setTimeout(()=>{
          window.location.href="goods-list.html"
        },2000)
      },
      error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
        // 提示
        bootoast({
          message: "服务器请求错误！",
          type: 'danger',
          position:'top',
          timeout:2
        });
      }

    })
    return true;
  }

  /**
   * 清空数据
   */
  function clearData(){
    $("#myForm").empty();
  }
</script>
</body>

</html>